{% extends "graficas_estadisticas/base_estadistica.html" %}
{% block script_estadistica %}
    <script type="text/javascript">
        var chart;
        function nuevo(mes, categ, datos) {
            chart = new Highcharts.Chart({
                chart:{
                    renderTo:'container',
                    type:'column'
                },
                title:{
                    text:'Estadistica por Categorias'
                },
                subtitle:{
                    text:'Estadistica mensual de solicitudes'
                },
                xAxis:{
                    categories:categ
                },
                yAxis:{
                    min:0,
                    title:{
                        text:'Numero de solicitudes'
                    }
                },
                legend:{
                    layout:'vertical',
                    backgroundColor:'#FFFFFF',
                    align:'left',
                    verticalAlign:'top',
                    x:100,
                    y:70,
                    floating:true,
                    shadow:true
                },
                tooltip:{
                    formatter:function () {
                        return '' +
                                this.x + ': ' + this.y + ' solicitudes';
                    }
                },
                plotOptions:{
                    column:{
                        pointPadding:0.2,
                        borderWidth:0
                    }
                },
                series:[
                    {
                        name:mes,
                        data:datos

                    }
                ]
            });
        }

    </script>
{% endblock %}
{% block options %}
    {% include "opciones.html" %}
{% endblock %}

{% block body_action %}
    <body onload="nuevo('{{ mes }} - {{ anio }}',
            {{ cat }} ,
            {{ data }})">
{% endblock %}
{% block body %}
    <div>
        {% include "graficas_estadisticas/anio_mes.html" %}
    </div>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
    </div>
{% endblock %} 
